import React, {Component} from 'react';
import {Table, message, Breadcrumb, Select,Modal,Descriptions,
    Tag, Button, Input, Row, Col, Form, Popconfirm} from 'antd';
import {
    SearchOutlined
} from "@ant-design/icons";

const { TextArea } = Input;
import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";
import '@src/style/product.scss';

const {confirm} = Modal;

export default class PackageProductOrder extends Component{
    state = {
        params: {
            page:1,
            size:15
        },
        list: [],
        total: 0,
        visible:false,
        confirmLoading:false,
        option:{refund_type:1,id:0,remark:"",log_id:0}
    };


    UNSAFE_componentWillMount() {
        this.fetchData();
    }


    fetchData = ()=>{
        let {params} = this.state
        axios.post("/activity/hot/log/apply_refund/list",params).then(res=>{
            let {data} = res
            this.setState({list:data.list,total:data.total})
        }).catch(res=>{
            console.log(res);
        });
        this.setState({list:[]})
    }


    onSearch = (values) => {
        Object.assign(this.state.params, {...values});
        console.log(this.state.params)
        this.fetchData();
    }
    onChangePage = (e) =>{
        console.log(e)
    }

    //显示模态框
    showModel = (id,refund_type,log_id) =>{
        let {option}  = this.state
        this.setState({visible:true,option:{...option,id,refund_type,log_id}})
    }
    //提交模态框内容
    showOk =(e) =>{
        let {option} = this.state
        axios.post("/activity/hot/order/refund",option).then(res=>{
            if(res.code==0){
                message.success(res.msg);
                this.fetchData();
            }else{
                message.warn(res.msg);
            }
            this.setState({visible:false})
        }).catch(res=>{
            this.setState({visible:false})
        });
    }
    //取消模态框
    showCancel = () =>{
        this.setState({visible:false,option:{refund_type:1,id:0,remark:"",log_id:0}})
    }

    remarkChange = (e)=>{
        let remark = e.target.value;
        let {option} = this.state;
        this.setState({option:{...option,remark:remark}});
    }

    render() {
        let {list,total,confirmLoading,visible} = this.state
        const columns = [
            {title:"订单号",dataIndex:"order_sn",align:"center"},
            {title:"用户手机号",dataIndex:"phone",align:"center"},
            {title:"退款说明",dataIndex:"reason",align:"center"},
            {title:"处理情况",dataIndex:"refund_type",align:"center",render:(e,{refund_type})=>{
                let color="";
                let text="";
                if(refund_type==1){
                    color = "green";
                    text = "已退款";
                }else if(refund_type==2){
                    color = "red";
                    text = "拒绝";
                }else if(refund_type==0){
                    color = "orange";
                    text = "待处理";
                }

                let tag = <Tag color={color}>{text}</Tag>
                return (
                    <div>
                        {tag}
                    </div>
                )
            }},
            {title:"退款备注",dataIndex:"remark",align:"center"},
            {title:"操作员",dataIndex:"option_username",align:"center"},
            {title:"申请时间",dataIndex:"created_at",align:"center"},
            {title:"操作",dataIndex:"id",align:"center",render:(e,record)=>{
                    if (record.refund_type === 0) {
                        return (
                            <div>
                                <Button type="primary" onClick={() => this.showModel(record.order_id, 1, e)}>同意</Button>
                                <Button type="primary" danger onClick={() => this.showModel(record.order_id, 2, e)}>拒绝</Button>
                            </div>
                        );
                    }else{
                        return (
                            <div>
                            </div>
                        )
                    }

                }
            }
        ];
        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>产品管理</Breadcrumb.Item>
                        <Breadcrumb.Item>热卖产品</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="#">退款记录</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <Row style={{padding: "20px 0 0 0 "}}>
                    <Col span={24}>
                        <Form
                            style={{width:"auto"}}
                            size="small"
                            // labelCol={{span: 6}}
                            // wrapperCol={{span: 24}}
                            name="basic"
                            onFinish={this.onSearch}>

                            <Row gutter={10}>
                                <Col span={5}>
                                    <Form.Item colon={false} name="order_sn">
                                        <Input placeholder="查询订单号"/>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item colon={false} name="phone">
                                        <Input placeholder="查询用户手机号"/>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item colon={false} name="refund_type">
                                        <Select  style={{width:100}} allowClear>
                                            <Select.Option value="">全部状态</Select.Option>
                                            <Select.Option value="0">待处理</Select.Option>
                                            <Select.Option value="1">同意</Select.Option>
                                            <Select.Option value="2">拒绝</Select.Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                              
                            </Row>
                            <Row>
                                <Button type="primary" htmlType="submit"><SearchOutlined />查询</Button>
                            </Row>
                        </Form>
                    </Col>

                </Row>

                <Row style={{padding: "20px 0 0 0 "}} >
                    <Col span={24}>
                        <Table
                            size="small"
                            columns={columns}
                            rowKey="id"
                            dataSource={list}
                            pagination={{
                                total: total,
                                pageSize: this.state.params.size,
                                current: this.state.params.page,
                                onChange: this.onChangePage
                            }}
                        />
                    </Col>
                </Row>

                <Modal
                    width="400px"
                    visible={visible}
                    onOk={this.showOk}
                    onCancel={this.showCancel}
                    confirmLoading={confirmLoading}
                    maskClosable
                    destroyOnClose={true}
                    closable={false}
                    maskStyle={{backgroundColor: 'rgba(0,0,0,.15)'}}
                >
                    <TextArea rows={4}  placeholder="填写备注" onChange={value =>this.remarkChange(value)}/>
                </Modal>
            </div>
        )
    }



}